<template>
    <div>
        <h1>康复信息列表</h1>
        <a href="Add">添加</a>
        项目名称:<input type="text" placeholder="名称模糊查询" v-model="paeg.kangName">
        <input type="button" value="查询"  @click="Show()">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" @change="all" v-model="quanxuan">
                    </td>
                    <td>编号</td>
                    <td>自动生成的编号</td>
                    <td>康复名称</td>
                    <td>状态</td>
                    <td>服务时长</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>
                        <input type="checkbox"  :value="m.kangId" v-model="idlist" >
                    </td>
                    <td>{{m.kangId}}</td>
                    <td>{{m.code}}</td>
                    <td>{{m.kangName}}</td>
                    <td>{{m.kangStart?"启用":"禁用"}}</td>
                    <td>{{m.fangTime}}</td>
                    <td><input type="button" value="逻辑删除" @click="LJdele(m.kangId)"></td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fen(1)">
        <input type="button" value="上一页" @click="fen(2)">
        <input type="button" value="下一页" @click="fen(3)">
        <input type="button" value="尾页" @click="fen(4)">
        一共{{prcount.pcount}}页，一共{{prcount.count}}条，当前第{{paeg.pageindex}}页，每页{{paeg.pagesize}}条
        <select v-model="paeg.pagesize" @change="siz">
            <option>2</option>
            <option>3</option>
            <option>5</option>
        </select>
        <input type="text" v-model="paeg.pageindex">
        <input type="button" value="跳转" @click="tiaozhuan">
        <input type="button" value="批量修改启用/禁用" @click="updateStart">
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from 'axios';
//保存选择行的编号
const idlist=ref([0]);//数组
const quanxuan=ref(false);
//全选
const all=()=>{
    if(quanxuan.value)
    {
        data.value.forEach(e=>{
            idlist.value.push(e.kangId);
        })
    }
    else
    {
        idlist.value=[];
    }
}
//批量修改启用禁用
const updateStart=()=>{
    if(!confirm("确定修改吗？"))
    {
        return;
    }
    var ids=idlist.value.toString();
    axios.get("https://localhost:7211/api/KangFu/updatestart",{params:{idstring:ids}}).then(res=>{
        if(res.data>0)
        {
            alert("成功！");
            Show();
        }
        else{
            alert("失败！");
        }
    })
}
//逻辑删除
const LJdele=(kangId:number)=>{
    axios.put("https://localhost:7211/api/KangFu/LJdele?kangId="+kangId).then(res=>{
        if(res.data>0)
    {
        alert("删除成功！");
        Show();
    }
    else{
        alert("删除失败！");
    }
    })
}
//分页+显示
const fen=(e:any)=>{
    if(e==1)
    {
        paeg.value.pageindex=1;
        Show();
    }
    if(e==2)
    {
        if(paeg.value.pageindex>1)
        {
            paeg.value.pageindex-=1;
            Show();
        }
    }
    if(e==3)
    {
        if(paeg.value.pageindex<prcount.value.pcount)
        {
            paeg.value.pageindex+=1;
            Show();
        }
    }
    if(e==4)
    {
        paeg.value.pageindex=prcount.value.pcount;
        Show();
    }
}
const paeg=ref({
    kangName: "",
    pageindex:1,
    pagesize:2
})
const prcount=ref({
    count:0,
    pcount:0
})
//修改也容量
const siz=()=>{
    paeg.value.pageindex=1;
    Show();
}
//跳转
const tiaozhuan=()=>{
    if(paeg.value.pageindex>1&&paeg.value.pageindex<=prcount.value.pcount)
    {
        Show();
    }
}
//条件查
const tiao=()=>{
    paeg.value.pageindex=1;
    Show();
}
//显示
onMounted(()=>{
    Show();
})
const data=ref([{
    "kangId": 0,
    "code": "string",
    "kangName": "string",
    "kangStart": true,
    "fangTime": 0,
    "deleId": 0
}])
const Show=()=>{
    axios.get("https://localhost:7211/api/KangFu/GetAll",{params:paeg.value}).then(res=>{
        data.value=res.data.data;
        prcount.value.count=res.data.count;
        prcount.value.pcount=Math.ceil(res.data.count/paeg.value.pagesize);
    })
}
</script>

<style scoped>

</style>